<template>
  <div class="text_field">
    <label class="text_field_placeholder" :class="{isshow: show, isinput: currentValue, transorm: transorm}">{{ label }}</label>
    <span class="field_input_icon">
      <a-icon :type="icon" />
    </span>
    <input
      class="text_field_input"
      v-bind="$props"
      :value="currentValue"
      @focus="handleFocus"
      @blur="handleBlur"
      @input="handleInput"
      @keyup.enter="handlePressEnter"
    />
  </div>
</template>

<script>
export default {
  name: 'TextField',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data () {
    return {
      show: false,
      transorm: false,
      currentValue: this.value
    }
  },
  methods: {
    handleFocus () {
      if (!this.currentValue) {
        this.transorm = true
      }
      this.show = true
    },
    handleBlur () {
      if (!this.currentValue) {
        this.transorm = false
      }
      this.show = false
    },
    handleInput (event) {
      const value = event.target.value
      this.$emit('input', value)
      this.setCurrentValue(value)
      this.$emit('change', value)
    },
    setCurrentValue (value) {
      if (value === this.currentValue) return
      this.currentValue = value
    },
    handlePressEnter () {
      this.$emit('pressEnter')
    }
  },
  created () {
    this.value && (this.show = true)
  }
}
</script>

<style scoped lang="less">
@import url('../../style/_var.less');
.text_field {
  position: relative;
  width: 100%;
  background-color: @input-bg;
  &:hover {
    .text_field_input {
      border-color: @primary-color;
    }
  }
  .field_input_icon {
    position: absolute;
    left: @input-padding-horizontal-base;
    font-size: @font-size-base;
    color: @input-placeholder-color;
  }
  .text_field_placeholder {
    position: absolute;
    top: 0;
    left: @input-padding-horizontal-base * 2 + @font-size-base;
    font-size: @font-size-base;
    color: @input-placeholder-color;
  }
  .text_field_input {
    position: relative;
    z-index: 2;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;
    padding-left: @input-padding-horizontal-base * 2 + @font-size-base;
    width: 100%;
    height: @input-height-base;
    font-size: @font-size-base;
    border: none;
    border-bottom: 2px solid @input-border-color;
    color: @input-color;
    background-color: transparent;
    appearance: none;
    line-height: @line-height-base;
    background-image: none;
    &:focus {
      border-color: @primary-color;
      //box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@primary-color, 20%);
      outline: 0;
      outline-color: initial;
      outline-style: initial;
    }
  }
  .isinput {
    top: -@input-height-base/2 - 6;
    left: @input-padding-horizontal-base/2;
  }
  .isshow {
    top: -@input-height-base/2 - 4;
    left: @input-padding-horizontal-base/2;
    color: @primary-color;
  }
  .transorm {
    animation: myfirst 0.5s;
  }
  @keyframes myfirst {
    0% {
      top: 0;
      left: @input-padding-horizontal-base * 2 + @font-size-base;
    }
    100% {
      top: -@input-height-base/2 - 4;
      left: @input-padding-horizontal-base / 2;
    }
  }
}
</style>
